<!DOCTYPE html>
<html>
<head>
	<title>订单管理</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/manage-order.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
</head>
<body>
	<header>
		<div class="header-main">
			<div class="header-title">订单管理</div>
		</div>
	</header>
	<nav></nav>
	<div class="main">
		<div class="order-left">
			<div class="title">创建订单</div>
			<div>订单号：<input type="text"></div>
			<div>创建人：<input type="text"></div>
			<div>订单价格：<input type="text"></div>
			<div>出发地：<input type="text"></div>
			<div>目的地：<input type="text"></div>
			<div>估计距离：<input type="text"></div>
			<div>出发时间：<input type="data"></div>
			<div>到达时间：<input type="text"></div>
			<div class="order-left-commit"><button>创建</button></div>
		</div>
		<div class="order-right">
			<div class="title">订单查询</div>
			<div class="order-num">
				<label>订单号</label>
				<input type="text">
				<button>查询</button>
			</div>
			<div class="order-num">
				<label>时间段</label>
				<input type="text">
				<button>查询</button>
			</div>
			<div class="order-num">
				<label>创建人</label>
				<input type="text">
				<button>查询</button>
			</div>
		</div>
	</div>
	<div class="order-news">
		<div>有新的订单....</div>
	</div>
	<div class="order-news-content">
		<div class="order-news-close">新的订单信息<span class="fa fa-times"></span></div>
		<div class="order-news-block">
			<div class="order-news-block-head">订单号：324324454356</div>
			<div>创建人：张晓</div>
			<div>订单价格：200</div>
			<div>创建人</div>
			<div>订单价格：200</div>
		</div>
		
	</div>

	<div class="order-list">
		<div class="list-close"><span class="fa fa-times"></span></div>
		<div class="list-main">
			<div class="list-head">订单列表</div>
			<div class="list-table">
				<table>
					<thead>
						<tr>
							<th>订单号</th>
							<th>创建者</th>
							<th>出发地</th>
							<th>目的地</th>
							<th>时间</th>
							<th>时间</th>
						</tr>	
					</thead>
					<tbody>
						<tr>
							<td>3433553455</td>
							<td>张晓</td>
							<td>苏州园区</td>
							<td>苏州园区</td>
							<td>2015/05/25</td>
							<td>2015/05/25</td>
						</tr>
						<tr>
							<td>3433553455</td>
							<td>张晓</td>
							<td>苏州园区</td>
							<td>苏州园区</td>
							<td>2015/05/25</td>
							<td>2015/05/25</td>

						</tr>
						<tr>
							<td>3433553455</td>
							<td>张晓</td>
							<td>苏州园区</td>
							<td>苏州园区</td>
							<td>2015/05/25</td>
							<td>2015/05/25</td>

						</tr>
						<tr>
							<td>3433553455</td>
							<td>张晓</td>
							<td>苏州园区</td>
							<td>苏州园区</td>
							<td>2015/05/25</td>
							<td>2015/05/25</td>

						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="list-detail-main">
			<div class="list-detail-head">
				<div class="list-head-left">订单详细信息</div>
				<div class="list-head-right">返回</div>
			</div>
			<div class="list-detail-body">
				<div class="list-detail-num">订单号:3843987495</div>
				<div class="list-detail-content">
					<div>创建人：张晓</div>
					<div>出发地：苏州工业园区若水路99号</div>
					<div>目的地：苏州工业园区若水路99号</div>
					<div>出发时间：2015/05/25</div>
					<div>到达时间：2015/05/25</div>
					<div>订单价格</div>
					<div>乘客人数：4</div>
				</div>
				<div class="list-detail-other">其他乘客信息</div>

				<div class="list-detail-passenger">
					<div>姓名：张晓</div>
					<div>预付金额：100</div>
					<div>出发时间：2015/05/25</div>
					<div>出发地：苏州工业园区若水路99号</div>
				</div>
				<div class="passenger-other">
					<div>other other</div>
					<div>other other</div>
					<div>other other</div>
					<div>other other</div>
				</div>

				<div class="list-detail-passenger">
					<div>姓名：张晓</div>
					<div>预付金额：100</div>
					<div>出发时间：2015/05/25</div>
					<div>出发地：苏州工业园区若水路99号</div>
				</div>
				<div class="passenger-other">
					<div>other</div>
				</div>

				<div class="list-detail-passenger">
					<div>姓名：张晓</div>
					<div>预付金额：100</div>
					<div>出发时间：2015/05/25</div>
					<div>出发地：苏州工业园区若水路99号</div>
				</div>
				<div class="passenger-other">
					<div>other</div>
				</div>

			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function (){
		$(".passenger-other").last().css({"border-bottom":"1px solid #bbb"});
		$(".order-news-close").click(function(){
			$(".order-news").fadeOut();
			$(".order-news-content").fadeOut();
		});

		$(".order-num button").click(function(){
			$(".order-list").fadeIn();
			$(".list-main").fadeIn();
			$(".list-detail-main").hide();
		});
		$(".list-close").click(function(){
			$(".order-list").fadeOut();
		});

		$(".list-table tbody tr").click(function(){
			$(".list-main").hide();
			$(".list-detail-main").fadeIn();
		});

		$(".list-head-right").click(function(){
			$(".list-detail-main").hide();
			$(".list-main").fadeIn();
		});

		$(".list-detail-passenger").click(function(){
			$(this).next().toggleClass("block");
		});
		$(".order-news").click(function(){
			$(".order-news-content").toggleClass("block");
		})
	});
</script>
</html>